<template>
    <el-dialog v-model="dialogFormVisible" :title="props.title" @closed="dialogClose" @open="dialogOpen" >
        <el-form :model="form" ref="uploadRef">
            <el-form-item label="上传头像" prop="headimgurl">
                <s-upload v-model="form.headimgurl"></s-upload>
            </el-form-item>
            <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名' }]">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="班级" prop="class" :rules="[{ required: true, message: '请输入班级' }]">
                <el-input v-model="form.class" />
            </el-form-item>
            <el-form-item label="年龄" prop="age" :rules="[{ required: true, message: '请输入年龄' }]">
                <el-input v-model="form.age" />
            </el-form-item>
            <el-form-item label="城市" prop="city" :rules="[{ required: true, message: '请输入城市' }]">
                <el-input v-model="form.city" />
            </el-form-item>
            <el-form-item label="学历" prop="degree" :rules="[{ required: true, message: '请输入学历' }]">
                <el-input v-model="form.degree" />
            </el-form-item>
            <el-form-item label="项目地址" prop="productUrl" :rules="[{ required: true, message: '请输入项目地址' }]">
                <el-input v-model="form.productUrl" />
            </el-form-item>
            <el-form-item label="描述" prop="description" :rules="[{ required: true, message: '请输入描述' }]">
                <el-input v-model="form.description" />
            </el-form-item>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="ok">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref,reactive, watch } from "vue"
let dialogFormVisible = ref(false)
// 引入上传组件
import sUpload from "../sUpload/index.vue"
import { ElMessage } from 'element-plus'
// 声明props接收传递的数据
let props = defineProps({
    title: {
        type: String,
        default: ''
    },
    modelValue: {
        typr: Boolean,
        default: false
    },
    // 弹框的类型
    action: {
        type: String,
        default: ''
    },
    // 弹框的回显数据
    reviewData: {
        type: Object,
    }
})
//表单数据
const form = reactive({
    class: '',
    name: '',
    age: "",
    city: "",
    degree: '',
    productUrl: "",
    description: "",
    headimgurl: ""
})
// 定义组件点击确定和取消触发的方法
let emit = defineEmits(['update:modelValue', 'ok', 'cancel'])
// 监听props中的dailogFormVisible的变化
watch(() => props.modelValue, (newVal) => {
    // 判断当前props中的dialogFormVisible的值是否和当前组件的dialogFormVisible的值一致，不一致就同步
    if (newVal !== dialogFormVisible.value) {
        dialogFormVisible.value = newVal
    }
})
// 声明表单验证的变量
let uploadRef = ref()
// 声明操作模式需要的sId变量
let sId = ref()
// 声明dialog打开的触发的方法
let dialogOpen = () => {
    // 判断当前props的action是什么模式就打开什么模式的弹框
    if (props.action === 'editor') {
        sId.value = props.reviewData.sId
        // console.log(props.reviewData);
        // 过滤reviewData中的sId和——id，并把过滤后的数据给form赋值回显数据
        Object.keys(props.reviewData).filter(key => key !== 'sId' && key !== '_id').forEach(key => { form[key] = props.reviewData[key] })
    }else{
        // 清空form中的数据
    uploadRef.value.resetFields()
       
    }
}
// 声明dialog关闭的方法
let dialogClose = () => {
    dialogFormVisible.value = false
    emit('update:modelValue', dialogFormVisible.value)
    
}
// 声明点击确定触发的方法
let ok = () => {
    // 调用表单验证的方法
    uploadRef.value.validate(valid=>{
        if(valid){
            // 判断是编辑还是添加
            if(props.action === 'editor'){
                // 调用编辑的方法
                emit('ok',{sId:sId.value,...form})
            }else if(props.action === 'add'){
                //调用添加的房方法
                emit('ok',{...form})
            }
        }
    })
    dialogFormVisible.value = false
}
// 声明点击取消触发的方法
let cancel = () => {
    dialogFormVisible.value = false
    ElMessage.error('取消操作')
}

</script>